<template>
  <div class="emr-content-module module-chiefComplaint">
    <h3 id="personality">既往史</h3>
    <div class="content-wrapper" :class="{ locked: d.disabled }">
      <div>
        <span>曾患疾病:</span>
        <el-radio-group v-model="d.pastHistory.attr1" @click="clear('attr2')">
          <el-radio label="0" :disabled="d.disabled">无</el-radio>
          <el-radio label="1" :disabled="d.disabled">有</el-radio>
        </el-radio-group>

        <el-input
          v-if="d.pastHistory.attr1 === '1'"
          v-model="d.pastHistory.attr2"
          size="medium"
          :disabled="d.disabled"
          placeholder="输入疾病"
          maxlength="50"
          style="width: 360px"
        ></el-input>
      </div>

      <div>
        <span>药物、食物过敏史:</span>
        <el-radio-group v-model="d.pastHistory.attr3" @click="clear('attr4')">
          <el-radio label="0" :disabled="d.disabled">无</el-radio>
          <el-radio label="1" :disabled="d.disabled">有</el-radio>
        </el-radio-group>

        <el-input
          v-if="d.pastHistory.attr3 === '1'"
          v-model="d.pastHistory.attr4"
          size="medium"
          :disabled="d.disabled"
          placeholder="输入疾病"
          maxlength="50"
          style="width: 360px"
        ></el-input>
      </div>

      <div>
        <span>吸入过敏原过敏史:</span>
        <el-radio-group v-model="d.pastHistory.attr5" @click="clear('attr6')">
          <el-radio label="0" :disabled="d.disabled">无</el-radio>
          <el-radio label="1" :disabled="d.disabled">有</el-radio>
        </el-radio-group>

        <el-input
          v-if="d.pastHistory.attr5 === '1'"
          v-model="d.pastHistory.attr6"
          size="medium"
          :disabled="d.disabled"
          placeholder="输入疾病"
          maxlength="50"
          style="width: 360px"
        ></el-input>
      </div>

      <div>
        <span>是否有婴儿湿疹:</span>
        <el-radio-group v-model="d.pastHistory.attr7" @click="clear('attr8')">
          <el-radio label="0" :disabled="d.disabled">无</el-radio>
          <el-radio label="1" :disabled="d.disabled">有</el-radio>
        </el-radio-group>
        <el-input
          v-if="d.pastHistory.attr7 === '1'"
          v-model="d.pastHistory.attr8"
          size="medium"
          :disabled="d.disabled"
          placeholder="输入疾病"
          maxlength="50"
          style="width: 360px"
        ></el-input>
      </div>

      <div>
        <span>是否经常起皮疹:</span>
        <el-radio-group v-model="d.pastHistory.attr9" @click="clear('attr10')">
          <el-radio label="0" :disabled="d.disabled">无</el-radio>
          <el-radio label="1" :disabled="d.disabled">有</el-radio>
        </el-radio-group>
        <el-input
          v-if="d.pastHistory.attr9 === '1'"
          v-model="d.pastHistory.attr10"
          size="medium"
          :disabled="d.disabled"
          placeholder="输入疾病"
          maxlength="50"
          style="width: 360px"
        ></el-input>
      </div>

      <div>
        <span>是否患有哮喘:</span>
        <el-radio-group v-model="d.pastHistory.attr11" @click="clear('attr12')">
          <el-radio label="0" :disabled="d.disabled">无</el-radio>
          <el-radio label="1" :disabled="d.disabled">有</el-radio>
        </el-radio-group>
        <el-input
          v-if="d.pastHistory.attr11 === '1'"
          v-model="d.pastHistory.attr12"
          size="medium"
          :disabled="d.disabled"
          placeholder="输入疾病"
          maxlength="50"
          style="width: 360px; margin-right: 5px"
        ></el-input>
        <span style="margin-right: 5px">睡眠后是否:</span>
        <span class="inline-block">
          <el-checkbox-group v-model="d.pastHistory.attr13">
            <el-checkbox
              size="medium"
              label="鼻塞"
              :disabled="d.disabled"
            ></el-checkbox>
            <el-checkbox
              size="medium"
              label="打鼾"
              :disabled="d.disabled"
            ></el-checkbox>
            <el-checkbox
              size="medium"
              label="张口呼吸"
              :disabled="d.disabled"
            ></el-checkbox>
          </el-checkbox-group>
        </span>
      </div>

      <div>
        <span>既往过敏原检测:</span>
        <el-radio-group v-model="d.pastHistory.attr14" @click="clear('attr15')">
          <el-radio label="0" :disabled="d.disabled">无</el-radio>
          <el-radio label="1" :disabled="d.disabled">有</el-radio>
        </el-radio-group>
        <el-input
          v-if="d.pastHistory.attr14 === '1'"
          v-model="d.pastHistory.attr15"
          size="medium"
          :disabled="d.disabled"
          placeholder="输入疾病"
          maxlength="50"
          style="width: 360px"
        ></el-input>
      </div>
    </div>
  </div>
</template>
<script>
  import { reactive, inject } from 'vue'
  export default {
    name: 'pastHistory',
    setup() {
      const initForm = function () {
        return {
          attr1: null,
          attr2: null,
          attr3: null,
          attr4: null,
          attr5: null,
          attr6: null,
          attr7: null,
          attr8: null,
          attr9: null,
          attr10: null,
          attr11: null,
          attr12: null,
          attr13: [],
          attr14: null,
          attr15: null,
        }
      }
      const d = reactive({ pastHistory: initForm() })
      const clearValue = inject('clearValue')
      const clear = function (val) {
        clearValue(d.pastHistory, val)
      }
      return {
        d,
        clear,
      }
    },
  }
</script>
<style lang="scss" scoped>
  @import '@/styles/emr.scss';
</style>
